<template name="swiperBox">
	<view>
		<uniSwiperDot mode="round" :current="current" :dotsStyles="dotsStyles" :info="swiperList" :minHeight="swiperHeight">
			<swiper class="swiperContter" :autoplay="autoPlay" :interval="interval" :style="{height:swiperHeight+'px'}" @change="slideSwip">
				<swiper-item class="swiperSlide" v-for="(item,index) in swiperList" :key="index" :style="{borderRadius:borderRadius+'px'}">
					<image class="swiperImg" :src="item.imgSrc" :data-url="item.url?item.url:''" @tap="toPage" :data-opt="item.opt?item.opt:null" :style="{height:swiperHeight+'px'}"></image>
				</swiper-item>
			</swiper>
		</uniSwiperDot>
		
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	export default {
		components:{uniSwiperDot},
		name: 'swiperBox', //组件名称
		// 传递参数
		props: {
			autoPlay: {
				type: Boolean,
				default: false
			},
			indicatorDots: {
				type: Boolean,
				default: true
			},
			interval: {
				type: Number,
				default: 3000
			},
			borderRadius:{
				type:Number,
				default:10
			},
			swiperList: {
				type: Array,
				default:()=>{
					return [{
					imgSrc: "../../static/index/banner2.png",
					url: "login",
					opt: {
						uid: 123
					},
					imgWidth: 999,
					imgHeight: 308
				}, {
					imgSrc: "../../static/index/banner2.png",
					url: "",
					opt: {
						uid: 123
					},
					imgWidth: 999,
					imgHeight: 308
				}, {
					imgSrc: "../../static/index/banner2.png",
					url: "",
					opt: {
						uid: 123
					},
					imgWidth: 999,
					imgHeight: 308
				}]
				},
			},
			info: {
				type: Array,
				default () {
					return []
				}
			},
			dotsStyles: {
				type: Object,
				default () {
					return {}
				}
			},
			// 类型 ：default(默认) indexes long nav
			mode: {
				type: String,
				default: 'default'
			},
			// 只在 nav 模式下生效，变量名称
			field: {
				type: String,
				default: ''
			}
		},
		// 组件参数
		data() {
			return {
				swiperHeight: this.getComsHeight(),
				current:0,
				
			}
		},
		// 组件方法
		methods: {
			slideSwip:function (e) {
				let bili=this.swiperList[e.detail.current].imgWidth/this.swiperList[e.detail.current].imgHeight;
				this.swiperHeight= parseInt((uni.getSystemInfoSync().screenWidth-uni.upx2px(56))/bili);
				this.current=e.detail.current
			},
			getComsHeight(){
				let bili=this.swiperList[0].imgWidth/this.swiperList[0].imgHeight;
				return parseInt((uni.getSystemInfoSync().screenWidth-uni.upx2px(56))/bili)
			},
			
			
		},
		created() {
			setTimeout(()=>{
				let query = uni.createSelectorQuery().in(this);
				query.select('.swiperContter').boundingClientRect(data => {
					getApp().globalData.G_SWIPER=data
				}).exec();
			},100)
			
		},
	}
</script>

<style lang="less">
	@import "../../common/public.less";

	.swiperContter {
		width: 100%;
		transition: all 0.3s;
	}

	.swiperImg {
		width: 100%;
		display: block;
	}
	.swiperSlide{
		overflow: hidden;
	}
</style>
